<template>
  <el-dialog :title="dialogData.title"
             :visible.sync="dialogData.show"
             center
             @close="$emit('closedialog')">
    <el-form :model="formdata"
             label-position="right"
             ref="formRefs"
             label-width="150px"
             :rules="formRules">
      <el-form-item label="分类名称："
                    prop="name">
        <el-input v-model="formdata.name"
                  maxlength="20"
                  autocomplete="off"
                  clearable
                  placeholder="请输入分类名称"
                  style="width:50%"></el-input>
      </el-form-item>
      <el-form-item label="背景颜色："
                    prop="rgb">
        <el-color-picker v-model="formdata.rgb"></el-color-picker>
      </el-form-item>
      <el-form-item label="图标："
                    prop="iconUrl">
        <el-upload class="avatar-uploader"
                   :action="imageUploadUrl"
                   :show-file-list="false"
                   accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="formdata.iconUrl"
               :src="formdata.iconUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="前端排序："
                    prop="sortNum">
        <el-input v-model="formdata.sortNum"
                  @input="inputKeyUpHandler"
                  autocomplete="off"
                  clearable
                  placeholder="请输入排序"
                  style="width:50%"></el-input>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button @click="$emit('closedialog')">取 消</el-button>
      <el-button type="primary"
                 @click="onSubmit">保 存</el-button>
    </p>
  </el-dialog>
</template>

<script>
  export default {
    props: ['dialogData'],
    data () {
      return {
        formRules: {
          name: [
            { required: true, message: '请填写分类名称', trigger: 'blur' }
          ],
          rgb: [
            { required: true, message: '请选择背景颜色', trigger: 'change' }
          ],
          iconUrl: [
            { required: true, message: '请填上传图标', trigger: 'blur' }
          ],
          sortNum: [
            { required: true, message: '请填写前端排序', trigger: 'blur' }
          ]
        },
        formdata: {
          type: 1,
          name: '',
          rgb: '',
          iconUrl: null,
          sortNum: ''
        },
        imageUploadUrl: this.api.appUpgradeUpload.url,
      }
    },
    methods: {
      inputKeyUpHandler () {
        if (this.formdata.sortNum.length == 1) {
          this.formdata.sortNum = this.formdata.sortNum.replace(/[^0-9]/g, '');
        } else {
          this.formdata.sortNum = this.formdata.sortNum.replace(/\D/g, '');
        }
      },
      onSubmit () {
        this.$refs.formRefs.validate((valid) => {
          if (valid) {
            this.post(this.api.cooperationHospital.healthRiskTypeuploadInfo, this.formdata).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功!');
                this.$emit('closedialog');
              }
            })
          }
        })
      },
      handleAvatarSuccess (res) {
        this.formdata.iconUrl = res.object[0];
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
    },
    mounted () {
      if (this.dialogData.info) {
        this.formdata = this.dialogData.info;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px !important;
    height: 98px !important;
    line-height: 98px !important;
    text-align: center;
  }
  .avatar {
    width: 98px !important;
    height: 98px !important;
    display: block;
  }
</style>